<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<link rel="stylesheet" type="text/css" href="../css/main.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="../css/colorbox/colorbox.css" media="screen" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript" src="../javascript/jquery.colorbox.js"></script>
	<script>
		$(document).ready(function(){
			$("#resultPanel").delegate(".thumbnails", "click", function(){
				$(".thumbnails").colorbox({width:"715px", height:"700px", 
					onComplete: function(){dojo.event.topic.publish("getTopTenTagTopic");}});
	      	});
		});
	</script>
	<sx:head/>
</head>
	<div class="form_header_container">
		<span class="form_header_text">Search Photo by Tags</span>
	</div>
	<div class="form_container">
		<div class="topPanel">
			<s:form action="">
				<s:textfield id="keyword" name="keyword" label="Keywords"/> <br />
				<s:radio cssClass="sortBy" name="sortBy" list="#{'1':'Relevancy', '2':'Interestingness'}" value="1" />
				<s:url var="searchPhotoLink" action="searchPhoto"/>
				<sx:submit indicator="queryLoadingImage" afterNotifyTopics="searchResultTopic" id="search" value="Search" href="%{searchPhotoLink}"/> <br />
			</s:form>
			<div id="queryLoadingImage"><img src="../images/loading.gif"/></div>
			<div id="displayLoadingImage"><img src="../images/loading.gif"/></div>
		</div>
	</div>
	
	<div class="left">
		<div class="search_header">
			<span class="form_header_text">Search Results</span>
		</div>
		<s:url var="searchResultLink" action="displayResult"/>
		<sx:div id="resultPanel" indicator="displayLoadingImage" href="%{searchResultLink}" listenTopics="searchResultTopic"></sx:div>
	</div>
	<div class="right">
		<s:url var="getTopTenTagLink" action="getTopTenTag"/>
		<sx:div id="tagPanel" href="%{getTopTenTagLink}" listenTopics="getTopTenTagTopic"></sx:div>
	</div>
	
	<script type="text/javascript">
		$('#queryLoadingImage').hide();
		$("#displayLoadingImage").hide();
	</script>
</html>